<!DOCTYPE html><html><head>
      <title>README</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      
      
      
      
      
      
      
      
      <style>
      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}


/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}

/* highlight */
pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}
pre[data-line] .line-highlight-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: block;
  width: 100%;
}

pre[data-line] .line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: hsla(24, 20%, 50%,.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

pre[data-line] .line-highlight:before, 
pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: hsla(24, 20%, 50%,.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em;
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
.slide {
    position: fixed;
    top: 80px;
    background: #fff;
    padding-left: 0;
    transform: translateX(-100%);
    margin-left: -30px;
}
      </style>
      <script>
          function turn(id, event) {
              let view = document.getElementById(id)
              view.scrollIntoView()
              event.stopPropagation()
          }
      </script>
    </head>
    <body for="html-export">
      <div class="mume markdown-preview  ">
      <h1 class="mume-header" id="react-admin-template">react-admin-template</h1>

<div class="code-chunk" data-id="code-chunk-id-0" data-cmd="toc"><div class="input-div"><div class="btn-group"><div class="run-btn btn"><span>&#x25B6;&#xFE0E;</span></div><div class="run-all-btn btn">all</div></div><div class="status">running...</div></div><div class="output-div"></div></div>
<ul class="slide">
<li onclick="turn('react-admin-template', event)"><a href="javascript:void(0)">react-admin-template</a>
<ul>
<li onclick="turn('install', event)"><a href="javascript:void(0)">&#x5B89;&#x88C5;</a></li>
<li onclick="turn('router', event)"><a href="javascript:void(0)">&#x8DEF;&#x7531;&#x7BA1;&#x7406;</a></li>
<li onclick="turn('component', event)"><a href="javascript:void(0)">&#x4E1A;&#x52A1;&#x7EC4;&#x4EF6;</a>
<ul>
<li onclick="turn('alert', event)"><a href="javascript:void(0)">Alert&#x786E;&#x8BA4;&#x63D0;&#x793A;&#x6846;</a></li>
<li onclick="turn('toask', event)"><a href="javascript:void(0)">Toask&#x8F7B;&#x63D0;&#x793A;</a></li>
<li onclick="turn('loading', event)"><a href="javascript:void(0)">Loading&#x52A0;&#x8F7D;&#x6846;</a></li>
<li onclick="turn('dialog', event)"><a href="javascript:void(0)">Dialog&#x5F39;&#x51FA;&#x5C42;</a></li>
<li onclick="turn('button', event)"><a href="javascript:void(0)">Button&#x6309;&#x94AE;</a></li>
<li onclick="turn('tag', event)"><a href="javascript:void(0)">Tag&#x6807;&#x7B7E;</a></li>
<li onclick="turn('table', event)"><a href="javascript:void(0)">Table&#x8868;&#x683C;</a></li>
<li onclick="turn('pagination', event)"><a href="javascript:void(0)">Pagination&#x5206;&#x9875;&#x5668;</a></li>
<li onclick="turn('form', event)"><a href="javascript:void(0)">Form</a>
<ul>
<li onclick="turn('input', event)"><a href="javascript:void(0)">input&#x8F93;&#x5165;&#x6846;</a></li>
<li onclick="turn('radio', event)"><a href="javascript:void(0)">radio&#x5355;&#x9009;&#x6846;</a></li>
<li onclick="turn('checkbox', event)"><a href="javascript:void(0)">checkbox&#x590D;&#x9009;&#x6846;</a></li>
<li onclick="turn('select', event)"><a href="javascript:void(0)">select&#x9009;&#x62E9;&#x6846;</a></li>
<li onclick="turn('switch', event)"><a href="javascript:void(0)">switch&#x5F00;&#x5173;</a></li>
<li onclick="turn('timepicker', event)"><a href="javascript:void(0)">timePicker&#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;</a></li>
<li onclick="turn('calendar', event)"><a href="javascript:void(0)">calendar&#x65E5;&#x5386;&#x9009;&#x62E9;&#x5668;</a></li>
<li onclick="turn('upload', event)"><a href="javascript:void(0)">upload&#x6587;&#x4EF6;&#x4E0A;&#x4F20;</a></li>
<li onclick="turn('formItem', event)"><a href="javascript:void(0)">Form&#x8868;&#x5355;</a>
<ul>
<li onclick="turn('formCheck', event)"><a href="javascript:void(0)">&#x8868;&#x5355;&#x9A8C;&#x8BC1;</a></li>
</ul>
</li>
</ul>
</li>
<li onclick="turn('tree', event)"><a href="javascript:void(0)">Tree&#x6811;&#x5F62;&#x5C55;&#x5F00;</a></li>
<li onclick="turn('crop', event)"><a href="javascript:void(0)">Crop&#x56FE;&#x7247;&#x88C1;&#x526A;</a></li>
<li onclick="turn('tooltip', event)"><a href="javascript:void(0)">Tooltip&#x63D0;&#x793A;</a></li>
<li onclick="turn('carousel', event)"><a href="javascript:void(0)">Carousel&#x8DD1;&#x9A6C;&#x706F;</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 class="mume-header" id="install">&#x5B89;&#x88C5;</h2>

<pre data-role="codeBlock" data-info class="language-"><code># &#x514B;&#x9686;&#x9879;&#x76EE;
git clone https://gitee.com/faithXiao/react-admin-template.git

# &#x8FDB;&#x5165;&#x9879;&#x76EE;&#x76EE;&#x5F55;
cd react-admin-template

# &#x5B89;&#x88C5;&#x4F9D;&#x8D56;
npm install

# &#x542F;&#x52A8;&#x670D;&#x52A1;
npm run start
</code></pre><h2 class="mume-header" id="router">&#x8DEF;&#x7531;&#x7BA1;&#x7406;</h2>

<pre data-role="codeBlock" data-info class="language-"><code>src/router/index.js

import React from &apos;react&apos;
import Layout from &apos;../views/layout&apos;

const routes = [
    {
        path: &quot;/&quot;,  //&#x8DEF;&#x5F84;
        redirect: &apos;/home&apos;,  //&#x91CD;&#x5B9A;&#x5411;&#x5730;&#x5740;
        hidden: true  //&#x4FA7;&#x8FB9;&#x680F;&#x9690;&#x85CF;
    },
    {
        path: &quot;/home&quot;,
        redirect: &apos;/home/index&apos;,
        component: Layout,  //&#x516C;&#x5171;&#x9875;&#x9762;&#x7EC4;&#x4EF6;&#xFF08;&#x5934;&#x90E8;&#xFF0C;&#x4FA7;&#x8FB9;&#x680F;&#xFF0C;&#x9875;&#x9762;&#x4E3B;&#x4F53;&#xFF09;&#x5E03;&#x5C40;
        name: &apos;home&apos;,  //&#x9875;&#x9762;&#x540D;&#x79F0;
        children: [
            {
                path: &quot;index&quot;,
                component: React.lazy(() =&gt; import(/* webpackChunkName: &quot;home&quot; */ &apos;../views/home/index&apos;)),  //&#x9875;&#x9762;&#x4E3B;&#x4F53;
                name: &apos;home&apos;
            }
        ]
    },
    {
        path: &quot;/another&quot;,
        component: Layout,
        name: &apos;&#x4E00;&#x7EA7;&apos;,
        children: [
            {
                path: &apos;a&apos;,
                component: React.lazy(() =&gt; import(/* webpackChunkName: &quot;another-a&quot; */ &apos;../views/another/a/index&apos;)),
                name: &apos;&#x4E8C;&#x7EA7;&apos;,
                children: [
                    {
                        path: &apos;1&apos;,
                        component: React.lazy(() =&gt; import(/* webpackChunkName: &quot;another-a-1&quot; */ &apos;../views/another/a/a1/index&apos;)),
                        name: &apos;&#x4E09;&#x7EA7;-1&apos;
                    },
                    
                    {
                        path: &apos;2&apos;,
                        component: React.lazy(() =&gt; import(/* webpackChunkName: &quot;another-a-2&quot; */ &apos;../views/another/a/a2/index&apos;)),
                        name: &apos;&#x4E09;&#x7EA7;-2&apos;
                    }
                ]
            },
            {
                path: &apos;b&apos;,
                component: React.lazy(() =&gt; import(/* webpackChunkName: &quot;another-b&quot; */ &apos;../views/another/b/index&apos;)),
                name: &apos;&#x4E8C;&#x7EA7;&apos;
            },
            {
                path: &apos;params/:id&apos;,
                component: React.lazy(() =&gt; import(/* webpackChunkName: &quot;another&quot; */ &apos;../views/another/params/index&apos;)),
                name: &apos;&#x4E8C;&#x7EA7;&#xFF08;&#x8DEF;&#x7531;&#x53C2;&#x6570;&#xFF09;&apos;,
                hidden: true
            }
        ]
    },
    {
        path: &quot;/404&quot;,  //404&#x9875;&#x9762;
        component: React.lazy(() =&gt; import(/* webpackChunkName: &quot;404&quot; */ &apos;../views/404/index&apos;)),
        name: &apos;404&apos;,
        hidden: true
    },
    {
        path: &quot;*&quot;,  //url&#x5730;&#x5740;&#x5168;&#x90E8;&#x5339;&#x914D;&#x4E0D;&#x6210;&#x529F;&#x91CD;&#x5B9A;&#x5411;404
        redirect: &apos;/404&apos;,
        hidden: true
    }
]
</code></pre><h2 class="mume-header" id="component">&#x4E1A;&#x52A1;&#x7EC4;&#x4EF6;</h2>

<h3 class="mume-header" id="alert">Alert&#x786E;&#x8BA4;&#x63D0;&#x793A;&#x6846;</h3>

<pre data-role="codeBlock" data-info class="language-"><code>import { Alert } from &apos;@/component/index&apos;

let alert = Alert()
alert.showAlert({
   title: &apos;&#x63D0;&#x793A;&apos;,  //&#x6807;&#x9898;
   message: &apos;Alert&apos;,  //&#x63D0;&#x793A;&#x6D88;&#x606F;
   confirm: () =&gt; {  //&#x786E;&#x8BA4;&#x56DE;&#x8C03;

   },
   cancel: () =&gt; {  //&#x53D6;&#x6D88;&#xFF0C;&#x5173;&#x95ED;&#x56DE;&#x8C03;

   }
})
</code></pre><h3 class="mume-header" id="toask">Toask&#x8F7B;&#x63D0;&#x793A;</h3>

<pre data-role="codeBlock" data-info class="language-"><code>import { Toask } from &apos;@/component/index&apos;

let toask = Toask()
toask.showToask({
    type: &apos;success&apos;,  &#x7C7B;&#x578B;&#xFF1A;success info warning error
    title: &apos;success&apos;,  &#x63D0;&#x793A;&#x6807;&#x9898;
    duration: 1500  &#x663E;&#x793A;&#x65F6;&#x957F;ms&#xFF0C;&#x82E5;&#x4E3A;0&#x4E0D;&#x81EA;&#x52A8;&#x5173;&#x95ED;&#xFF0C;&#x6709;&quot;x&quot;&#x5173;&#x95ED;&#x6309;&#x94AE;&#x53EF;&#x624B;&#x52A8;&#x5173;&#x95ED;
})
</code></pre><h3 class="mume-header" id="loading">Loading&#x52A0;&#x8F7D;&#x6846;</h3>

<pre data-role="codeBlock" data-info class="language-"><code>import { Loading } from &apos;@/component/index&apos;

let loading = Loading()
loading.showLoading(&apos;&#x52A0;&#x8F7D;&#x4E2D;...&apos;)  //&#x663E;&#x793A;
setTimeout(() =&gt; {
    loading.hideLoading()  //&#x5173;&#x95ED;
}, 1500)
</code></pre><h3 class="mume-header" id="dialog">Dialog&#x5F39;&#x51FA;&#x5C42;</h3>

<pre data-role="codeBlock" data-info class="language-"><code>import { Dialog } from &apos;@/component/index&apos;

constructor(props){
    super(props)
    this.state = {
        showDialog: false
    }
}
open(){
    this.setState({
        showDialog: true
    })
}
close(){
    this.setState({
        showDialog: false
    })
}
render(){
    return(
        &lt;div&gt;
            &lt;Dialog
                title=&quot;Dialog&quot;  //&#x6807;&#x9898;
                width=&quot;40%&quot;  //&#x6A21;&#x6001;&#x6846;&#x5BBD;&#x5EA6;&#xFF0C;% || px
                show={ this.state.showDialog }  //&#x63A7;&#x5236;Dialog&#x663E;&#x793A;&#x9690;&#x85CF;
                close={ (() =&gt; this.setState({ showDialog: false })).bind(this) }  //&#x5728;Dialog&#x5185;&#x90E8;&#x5173;&#x95ED;&#xFF0C;&#x9700;&#x4F20;&#x5165;&#x8BE5;&#x5173;&#x95ED;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
                destroy={ true }  //&#x5173;&#x95ED;Dialog&#x662F;&#x5426;&#x9500;&#x6BC1;&#x3002;&#x82E5;Dialog&#x5185;&#x5B58;&#x5728;&#x5B50;&#x7EC4;&#x4EF6;&#xFF0C;&#x5219;&#x8BE5;&#x5B50;&#x7EC4;&#x4EF6;&#x4F1A;&#x89E6;&#x53D1;&#x5378;&#x8F7D;&#x751F;&#x547D;&#x5468;&#x671F;&#x3002;show&#x4E3A;true&#x53EA;&#x662F;&#x9690;&#x85CF;Dialog&#xFF0C;&#x4E0D;&#x4F1A;&#x5728;&#x9875;&#x9762;&#x4E0A;&#x9500;&#x6BC1;
            &gt;
                &lt;button onClick={ this.close.bind(this) }&gt;close Dialog&lt;/button&gt;
            &lt;/Dialog&gt;
            &lt;button onClick={ this.open.bind(this) }&gt;open Dialog&lt;/button&gt;
        &lt;/div&gt;
    )
}
</code></pre><h3 class="mume-header" id="button">Button&#x6309;&#x94AE;</h3>

<pre data-role="codeBlock" data-info class="language-"><code>import { Button } from &apos;@/component/index&apos;

render(){
    return(
        &lt;Button
            type=&quot;primary&quot;  //&#x7C7B;&#x578B;&#xFF1A;primary success error warning info
            size=&quot;small&quot;  //&#x5927;&#x5C0F;&#xFF1A;mini small medium
            pain  //&#x6734;&#x7D20;&#x6309;&#x94AE;
        &gt;&#x6309;&#x94AE;&lt;/Button&gt;
    )
}
</code></pre><h3 class="mume-header" id="tag">Tag&#x6807;&#x7B7E;</h3>

<pre data-role="codeBlock" data-info class="language-"><code>import { Tag } from &apos;@/component/index&apos;

render(){
    return(
        &lt;Tag
            type=&quot;success&quot;  //&#x7C7B;&#x578B;&#xFF1A;success error warning info primary
            size=&quot;small&quot;  //&#x5927;&#x5C0F;&#xFF1A;mini small medium
        &gt;&#x6807;&#x7B7E;&lt;/Tag&gt;
    )
}

</code></pre><h3 class="mume-header" id="table">Table&#x8868;&#x683C;</h3>

<pre data-role="codeBlock" data-info class="language-"><code>import { Table } from &apos;@/component/index&apos;

constructor(props){
    super(props)
    this.state = {
        data: [
            {
                id: 1,
                name: &apos;&#x5F20;&#x4E09;&apos;,
                sex: &apos;&#x7537;&apos;,
                age: &apos;18&apos;,
                address: &apos;&#x5E7F;&#x4E1C;&apos;
            },
            {
                id: 2,
                name: &apos;&#x674E;&#x56DB;&apos;,
                sex: &apos;&#x5973;&apos;,
                age: &apos;20&apos;,
                address: &apos;&#x4E0A;&#x6D77;&apos;
            }
        ],
        loading: false,
        multipleSelectList: []
    }
    this.tableRef = React.createRef()
}
getItem(item, index){
    console.log(item, index)
}
multipleSelect(value){
    this.setState(state =&gt; {
        state.multipleSelectList = value
        return state
    })
}
clearSelection(){  //&#x6E05;&#x9664;&#x8868;&#x683C;&#x591A;&#x9009;
    this.tableRef.current.clearSelection()
}
clearExpand(){  //&#x6E05;&#x9664;&#x6570;&#x636E;&#x52A8;&#x6001;&#x66F4;&#x65B0;&#xFF0C;&#x5C55;&#x5F00;&#x884C;&#x4E0D;&#x4F1A;&#x81EA;&#x52A8;&#x6D88;&#x5931;&#x95EE;&#x9898;
    this.tableRef.current.clearExpand()
}
render(){
    return(
        &lt;Table.table
            data={ this.state.data }  //&#x6570;&#x636E;
            align=&quot;center&quot;  //&#x8868;&#x683C;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;left center right&#xFF0C;&#x9ED8;&#x8BA4;left
            selectionChange={ this.multipleSelect.bind(this) }  //checkbox&#x9009;&#x4E2D;&#x56DE;&#x8C03;
            multipleSelectList={ this.state.multipleSelectList }
            loading={ this.state.loading }  //&#x6570;&#x636E;&#x52A0;&#x8F7D;loading
            ref={ this.tableRef }
        &gt;
            //&#x5C55;&#x5F00;&#x884C;&#x5728;&#x8868;&#x683C;&#x6570;&#x636E;&#x52A8;&#x6001;&#x66F4;&#x65B0;&#x7684;&#x65F6;&#x5019;&#x4E0D;&#x4F1A;&#x81EA;&#x52A8;&#x6D88;&#x5931;(&#x6570;&#x636E;&#x6DFB;&#x52A0;&#xFF0C;&#x5220;&#x9664;&#xFF0C;&#x5206;&#x9875;&#x5207;&#x6362;&#x7B49;)&#xFF0C;&#x9700;&#x8C03;&#x7528;clearExpand()&#x624B;&#x52A8;&#x6E05;&#x9664;
            &lt;Table.column
                type=&quot;expand&quot;  //&#x884C;&#x5C55;&#x5F00;
                render={  //&#x5C55;&#x5F00;&#x6E32;&#x67D3;&#x51FD;&#x6570;
                    (item, index) =&gt; {  //&#x8FD4;&#x56DE;&#x6570;&#x7EC4;&#x6BCF;&#x4E00;&#x9879;
                        return &lt;div style={{ textAlign: &apos;left&apos; }}&gt;...&lt;/div&gt;  //&#x6CE8;&#xFF1A;&#x5C55;&#x5F00;&#x8282;&#x70B9;&#x6587;&#x5B57;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;&#x4F1A;&#x7EE7;&#x627F;table&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;
                    }
                }
            /&gt;
            &lt;Table.column
                type=&quot;expand&quot;
                lazy={ true }  //&#x5F02;&#x6B65;&#x83B7;&#x53D6;&#x6570;&#x636E;&#x5C55;&#x5F00;&#xFF0C;&#x8BBE;&#x7F6E;lazy
                render={
                    (item, index) =&gt; {
                        return new Promise(resolve =&gt; {  //&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;Promise&#x5BF9;&#x8C61;
                            setTimeout(() =&gt; {
                                resolve(
                                    &lt;div&gt;...&lt;/div&gt;
                                )
                            }, 1000)
                        })
                    }
                }
            /&gt;
            &lt;Table.column type=&quot;selection&quot; /&gt;  //checkbox&#x9009;&#x62E9;&#x6846;&#xFF0C;&#x8BBE;&#x7F6E;type=&quot;selection&quot;
            &lt;Table.column
                prop=&quot;name&quot;  //&#x5217;&#x6240;&#x5BF9;&#x5E94;&#x7684;&#x503C;
                label=&quot;&#x59D3;&#x540D;&quot;  //&#x5217;&#x540D;
                width=&quot;180&quot;  //&#x5217;&#x5BBD;&#xFF0C;&#x82E5;&#x4E0D;&#x8BBE;&#x7F6E;&#x5219;&#x5E73;&#x5206;&#x5BB9;&#x5668;&#x5269;&#x4F59;&#x5BBD;&#x5EA6;&#xFF08;&#x5BB9;&#x5668;&#x5BBD;&#x5EA6; - &#x6240;&#x6709;&#x5217;&#x5DF2;&#x8BBE;&#x7F6E;&#x5BBD;&#x5EA6;&#x603B;&#x548C;&#xFF09;
                align=&quot;left&quot;  //&#x5217;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;&#xFF0C;&#x4E0D;&#x53D7;&#x8868;&#x683C;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;&#x5F71;&#x54CD;
            /&gt;
            &lt;Table.column prop=&quot;sex&quot; label=&quot;&#x6027;&#x522B;&quot; width=&quot;180&quot; /&gt;
            &lt;Table.column prop=&quot;age&quot; label=&quot;&#x5E74;&#x9F84;&quot; /&gt;
            &lt;Table.column prop=&quot;address&quot; label=&quot;&#x5730;&#x5740;&quot; /&gt;
            &lt;Table.column
                label=&quot;&#x64CD;&#x4F5C;&quot;
                render={  //&#x8BBE;&#x7F6E;&#x51FD;&#x6570;&#x6E32;&#x67D3;&#x9700;&#x8981;&#x7279;&#x6B8A;&#x5904;&#x7406;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x5982;&#x56FE;&#x7247;&#xFF0C;&#x6309;&#x94AE;&#xFF0C;Tag&#x6807;&#x7B7E;&#x7B49;
                    (item, index) =&gt; {  //&#x8FD4;&#x56DE;&#x5F53;&#x524D;&#x64CD;&#x4F5C;&#x7684;&#x6570;&#x636E;&#x9879;item&#xFF0C;&#x4E0B;&#x6807;index
                        return(
                            &lt;div&gt;
                                &lt;button onClick={ (() =&gt; { this.getItem(item, index) }).bind(this) }&gt;&#x64CD;&#x4F5C;&lt;/Button&gt;
                            &lt;/div&gt;
                        )
                    }
                }
            /&gt;
        &lt;/Table.table&gt;
    )
}
</code></pre><h3 class="mume-header" id="pagination">Pagination&#x5206;&#x9875;&#x5668;</h3>

<pre data-role="codeBlock" data-info class="language-"><code>import { Pagination } from &apos;@/component/index&apos;

currentChange(e){  //e: &#x9875;&#x7801;
    console.log(e)
}
render(){
    return(
        &lt;Pagination
            total={ 100 }  //&#x603B;&#x6761;&#x6570;
            size={ 12 }  //&#x6BCF;&#x9875;&#x663E;&#x793A;&#x6761;&#x6570;
            count={ 7 }  //&#x6700;&#x5927;&#x9875;&#x7801;&#x6309;&#x94AE;&#x6570;
            current={ 1 }  //&#x5F53;&#x524D;&#x9875;&#x7801;
            currentChange={ this.currentChange.bind(this) }  //&#x9875;&#x7801;&#x6539;&#x53D8;&#x56DE;&#x8C03;&#x51FD;&#x6570;
        /&gt;
    )
}
</code></pre><h3 class="mume-header" id="form">Form</h3>

<pre data-role="codeBlock" data-info class="language-"><code>import { Form } from &apos;@/component/index&apos;  //Form&#x662F;&#x4E00;&#x4E2A;&#x5305;&#x542B;&#x6240;&#x6709;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x7684;&#x5BF9;&#x8C61;&#xFF0C;&#x4F7F;&#x7528;&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x524D;&#x9700;&#x5F15;&#x5165;&#x8BE5;&#x5BF9;&#x8C61;
</code></pre><h4 class="mume-header" id="input">input&#x8F93;&#x5165;&#x6846;</h4>

<pre data-role="codeBlock" data-info class="language-"><code>constructor(props){
    super(props)
    this.state = {
        value: &apos;&apos;
    }
}
onChange(value){
    console.log(value)
    this.setstate({
        value
    })
}
render(){
    return(
        &lt;Form.input
            type=&quot;text&quot;  //&#x7C7B;&#x578B;&#xFF1A;&quot;text&quot; &quot;password&quot; &quot;textarea&quot;
            value={ this.state.value }  //&#x8F93;&#x5165;&#x6846;&#x7ED1;&#x5B9A;&#x503C;
            onChange={ this.onChange.bind(this) }  //&#x8F93;&#x5165;&#x6846;&#x503C;&#x6539;&#x53D8;&#x56DE;&#x8C03;
            disabled  //&#x7981;&#x7528;
            placeholder=&quot;...&quot;
        /&gt;
    )
}
</code></pre><h4 class="mume-header" id="radio">radio&#x5355;&#x9009;&#x6846;</h4>

<pre data-role="codeBlock" data-info class="language-"><code>constructor(props){
    super(props)
    this.state = {
        value: &apos;&apos;
    }
}
onChange(value){
    console.log(value)
    this.setstate({
        value
    })
}
render(){
    return(
        &lt;Form.radioGroup
            value={ this.state.value }  //&#x5355;&#x9009;&#x6846;&#x7ED1;&#x5B9A;&#x503C;
            onChange={ this.onChange.bind(this) }  //&#x5355;&#x9009;&#x6846;&#x503C;&#x6539;&#x53D8;&#x56DE;&#x8C03;
        &gt;
            &lt;Form.radio
                label=&quot;radio 1&quot;  //&#x5355;&#x9009;&#x6846;&#x6807;&#x7B7E;
                value=&quot;1&quot;  //&#x5355;&#x9009;&#x6846;&#x503C;
            /&gt;
            &lt;Form.radio label=&quot;radio 2&quot; value=&quot;2&quot; /&gt;
        &lt;/Form.radioGroup&gt;
    )
}
</code></pre><h4 class="mume-header" id="checkbox">checkbox&#x590D;&#x9009;&#x6846;</h4>

<pre data-role="codeBlock" data-info class="language-"><code>constructor(props){
    super(props)
    this.state = {
        value: []
    }
}
onChange(value){
    console.log(value)
    this.setstate({
        value
    })
}
render(){
    return(
        &lt;Form.checkboxGroup
            value={ this.state.value }  //&#x590D;&#x9009;&#x6846;&#x7ED1;&#x5B9A;&#x503C;
            onChange={ this.onChange.bind(this) }  //&#x590D;&#x9009;&#x6846;&#x503C;&#x6539;&#x53D8;&#x56DE;&#x8C03;
        &gt;
            &lt;Form.checkbox
                label=&quot;checkbox 1&quot;  //&#x590D;&#x9009;&#x6846;&#x6807;&#x7B7E;
                value=&quot;1&quot;  //&#x590D;&#x9009;&#x6846;&#x503C;
            /&gt;
            &lt;Form.checkbox label=&quot;checkbox 2&quot; value=&quot;2&quot; /&gt;
        &lt;/Form.checkboxGroup&gt;
    )
}
</code></pre><h4 class="mume-header" id="select">select&#x9009;&#x62E9;&#x6846;</h4>

<pre data-role="codeBlock" data-info class="language-"><code>constructor(props){
    super(props)
    this.state = {
        value: &apos;&apos;  //&#x82E5;&#x5F00;&#x542F;&#x591A;&#x9009;&#xFF0C;&#x5219;value&#x5E94;&#x4E3A;&#x6570;&#x7EC4;[]
    }
}
onChange(value){
    console.log(value)
    this.setstate({
        value
    })
}
render(){
    return(
        &lt;Form.select
            value={ this.state.value }  //&#x7ED1;&#x5B9A;&#x503C;
            multiple  //&#x5F00;&#x542F;&#x591A;&#x9009;&#xFF0C;value&#x5E94;&#x5B9A;&#x4E49;&#x4E3A;&#x6570;&#x7EC4;[]
            onChange={ this.onChange.bind(this) }  //&#x7ED1;&#x5B9A;&#x503C;&#x6539;&#x53D8;&#x56DE;&#x8C03;
            placeholder=&quot;&#x8BF7;&#x9009;&#x62E9;...&quot;
        &gt;
            &lt;Form.option
                label=&quot;option 1&quot;  //&#x6807;&#x7B7E;
                value=&quot;1&quot;  //&#x503C;
            /&gt;
            &lt;Form.option label=&quot;option 2&quot; value=&quot;2&quot; /&gt;
            &lt;Form.option label=&quot;option 3&quot; value=&quot;3&quot; /&gt;
            &lt;Form.option label=&quot;option 4&quot; value=&quot;4&quot; /&gt;
            &lt;Form.option label=&quot;option 5&quot; value=&quot;5&quot; /&gt;
            &lt;Form.option label=&quot;option 6&quot; value=&quot;6&quot; /&gt;
        &lt;/Form.select&gt;
    )
}
</code></pre><h4 class="mume-header" id="switch">switch&#x5F00;&#x5173;</h4>

<pre data-role="codeBlock" data-info class="language-"><code>constructor(props){
    super(props)
    this.state = {
        value: &apos;&apos;
    }
}
onChange(value){
    console.log(value)
    this.setstate({
        value
    })
}
render(){
    return(
        &lt;Form.switch
            value={ this.state.value }  //&#x7ED1;&#x5B9A;&#x503C;
            activeText=&quot;&#x5F00;&quot;  //&#x5F00;&#x542F;&#x63D0;&#x793A;&#x4FE1;&#x606F;
            inactiveText=&quot;&#x5173;&quot;  //&#x5173;&#x95ED;&#x63D0;&#x793A;&#x4FE1;&#x606F;
            onChange={ this.onChange.bind(this) }  //&#x7ED1;&#x5B9A;&#x503C;&#x6539;&#x53D8;&#x56DE;&#x8C03;
        /&gt;
    )
}
</code></pre><h4 class="mume-header" id="timepicker">timePicker&#x65F6;&#x95F4;&#x9009;&#x62E9;&#x5668;</h4>

<pre data-role="codeBlock" data-info class="language-"><code>constructor(props){
    super(props)
    this.state = {
        value: &apos;&apos;
    }
}
onChange(value){
    console.log(value)
    this.setstate({
        value
    })
}
render(){
    return(
        &lt;Form.timePicker
            value={ this.state.value }  //&#x7ED1;&#x5B9A;&#x503C;
            onChange={ this.onChange.bind(this) }  //&#x7ED1;&#x5B9A;&#x503C;&#x6539;&#x53D8;&#x56DE;&#x8C03;
            placeholder=&quot;&#x8BF7;&#x9009;&#x62E9;...&quot;
        /&gt;
    )
}
</code></pre><h4 class="mume-header" id="calendar">calendar&#x65E5;&#x5386;&#x9009;&#x62E9;&#x5668;</h4>

<pre data-role="codeBlock" data-info class="language-"><code>constructor(props){
    super(props)
    this.state = {
        value: &apos;&apos;  //&#x65E5;&#x671F;&#x5BF9;&#x8C61;new Date() &#x6216; &apos;&apos;
    }
}
onChange(value){
    console.log(value)
    this.setstate({
        value
    })
}
render(){
    return(
        &lt;Form.calendar
            value={ this.state.value }  //&#x7ED1;&#x5B9A;&#x503C;
            onChange={ this.onChange.bind(this) }  //&#x7ED1;&#x5B9A;&#x503C;&#x6539;&#x53D8;&#x56DE;&#x8C03;
            placeholder=&quot;&#x8BF7;&#x9009;&#x62E9;...&quot;
        /&gt;          
    )
}
</code></pre><h4 class="mume-header" id="upload">upload&#x6587;&#x4EF6;&#x4E0A;&#x4F20;</h4>

<pre data-role="codeBlock" data-info class="language-"><code>constructor(props){
    super(props)
    this.uploadRef = React.createRef()
}
onChange(file){
    console.log(file)
}
render(){
    return(
        &lt;Form.upload
            ref={ this.uploadRef }
            onChange={ this.onChange.bind(this) }
        &gt;
            &lt;Button type=&quot;primary&quot; size=&quot;small&quot;&gt;&#x70B9;&#x51FB;&#x4E0A;&#x4F20;&lt;/Button&gt;
        &lt;/Form.upload&gt;       
    )
}
</code></pre><h4 class="mume-header" id="formItem">Form&#x8868;&#x5355;</h4>

<p>&#x5728;Form&#x8868;&#x5355;&#x7EC4;&#x4EF6;&#x4E2D;&#xFF0C;&#x6BCF;&#x4E00;&#x4E2A;&#x8868;&#x5355;&#x57DF;&#x7531;&#x4E00;&#x4E2A; &lt;Form.item&gt;&lt;/Form.item&gt; &#x7EC4;&#x4EF6;&#x6784;&#x6210;&#xFF0C;&#x8868;&#x5355;&#x57DF;&#x4E2D;&#x53EF;&#x4EE5;&#x653E;&#x7F6E;&#x5404;&#x79CD;&#x7C7B;&#x578B;&#x7684;&#x8868;&#x5355;&#x63A7;&#x4EF6;&#xFF0C;&#x5305;&#x62EC; input&#x3001;select&#x3001;checkbox&#x3001;radio&#x3001;switch&#x3001;calendar&#x3001;timePicker&#x3001;upload&#x7B49;</p>
<pre data-role="codeBlock" data-info class="language-"><code>constructor(props){
    super(props)
    this.state = {
        value: &apos;&apos;
    }
}
onChange(value){
    console.log(value)
    this.setstate({
        value
    })
}
render(){
    return(
        &lt;Form.form&gt;
            &lt;Form.item
                label=&quot;input&#xFF1A;&quot;  //&#x6807;&#x7B7E;
                labelWidth=&quot;100px&quot;  //&#x6807;&#x7B7E;&#x5BBD;&#x5EA6;
            &gt;
                &lt;Form.input
                    type=&quot;text&quot;
                    value={ this.state.value }
                    onChange={ this.onChange1.bind(this) }
                    placeholder=&quot;...&quot;
                /&gt;
            &lt;/Form.item&gt;
            &lt;Form.item
                label=&quot;input&#xFF1A;&quot;
                labelWidth=&quot;100px&quot;
                full={ true }  //&#x8BBE;&#x7F6E;full&#x5C5E;&#x6027;&#x4E3A;true&#xFF0C;&#x8868;&#x5355;&#x63A7;&#x4EF6;&#x8BBE;&#x7F6E;style={{ width: &apos;100%&apos; }}&#xFF0C;&#x8868;&#x5355;&#x63A7;&#x4EF6;&#x5BBD;&#x5EA6;&#x81EA;&#x52A8;&#x5360;&#x6EE1;&#x5269;&#x4F59;&#x5BBD;&#x5EA6;
            &gt;
                &lt;Form.select
                    type=&quot;text&quot;
                    value={ this.state.value }
                    onChange={ this.onChange1.bind(this) }
                    placeholder=&quot;...&quot;
                    style={{ width: &apos;100%&apos; }}
                /&gt;
                    &lt;Form.option key={ index } label=&apos;label&apos; value=&apos;1&apos; /&gt;
                &lt;/Form.select&gt;
            &lt;/Form.item&gt;
        &lt;/Form.form&gt;
    )
}
</code></pre><h5 class="mume-header" id="formCheck">&#x8868;&#x5355;&#x9A8C;&#x8BC1;</h5>

<pre data-role="codeBlock" data-info class="language-"><code>constructor(props){
    super(props)
    this.state = {
        inputValue: &apos;&apos;,
        passwordValue: &apos;&apos;
    }
    this.rules = {  //&#x9A8C;&#x8BC1;&#x5BF9;&#x8C61;
        text(value){  //&#x65B9;&#x6CD5;&#x540D;&#x79F0;&#x5BF9;&#x5E94;Form.item&#x4E2D;&#x7684;prop&#x5C5E;&#x6027;
            if(value === &apos;&apos;){  //&#x9A8C;&#x8BC1;&#x89C4;&#x5219;
                return &apos;&#x4E0D;&#x80FD;&#x4E3A;&#x7A7A;&apos;  //&#x9A8C;&#x8BC1;&#x4E0D;&#x901A;&#x8FC7;&#x63D0;&#x793A;&#x4FE1;&#x606F;
            }
            return true  //&#x9A8C;&#x8BC1;&#x901A;&#x8FC7;&#x9700;&#x8FD4;&#x56DE;true
        },
        password(value){
            if(value === &apos;&apos;){
                return &apos;&#x4E0D;&#x80FD;&#x4E3A;&#x7A7A;&apos;
            }else if(value.length &lt; 6){
                return &apos;&#x957F;&#x5EA6;&#x9700;&#x5927;&#x4E8E;6&apos;
            }
            return true
        }
    }
    this.rulesRef = React.createRef()
}
inputChange(value){
    this.setstate({
        inputValue: value
    })
}
passwordChange(value){
    this.setstate({
        passwordValue: value
    })
}
submit(){
    this.rulesRef.current.validate(valid =&gt; {  //&#x8C03;&#x7528;&#x8868;&#x5355;&#x9A8C;&#x8BC1;&#x5224;&#x65AD;&#x65B9;&#x6CD5;
        if(valid){
            console.log(&apos;&#x9A8C;&#x8BC1;&#x901A;&#x8FC7;&apos;)
        }
    })
}
clearValidate(){
    this.rulesRef.current.clearValidate()  //&#x6E05;&#x9664;&#x8868;&#x5355;&#x9A8C;&#x8BC1;&#x63D0;&#x793A;
}
render(){
    return(
        &lt;Form.form
            ref={ this.rulesRef }
            rules={ this.rules }  //&#x6DFB;&#x52A0;&#x8868;&#x5355;&#x9A8C;&#x8BC1;&#x89C4;&#x5219;rules&#x5C5E;&#x6027;
        &gt;
            &lt;Form.item
                label=&quot;input&#xFF1A;&quot;
                labelWidth=&quot;100px&quot;
                prop=&quot;text&quot;  //&#x6DFB;&#x52A0;prop&#x5C5E;&#x6027;&#xFF0C;&#x5BF9;&#x5E94;this.rules&#x4E2D;&#x7684;text
            &gt;
                &lt;Form.input
                    type=&quot;text&quot;
                    value={ this.state.inputValue }
                    onChange={ this.inputChange.bind(this) }
                    placeholder=&quot;...&quot;
                /&gt;
            &lt;/Form.item&gt;
            &lt;Form.item
                label=&quot;password&#xFF1A;&quot;
                labelWidth=&quot;100px&quot;
                prop=&quot;password&quot;
            &gt;
                &lt;Form.input
                    type=&quot;password&quot;
                    value={ this.state.passwordValue }
                    onChange={ this.passwordChange.bind(this) }
                    placeholder=&quot;...&quot;
                /&gt;
            &lt;/Form.item&gt;
            &lt;Button type=&quot;primary&quot; size=&quot;medium&quot; onClick={ this.submit.bind(this) }&gt;&#x786E;&#x5B9A;&lt;/Button&gt;
            &lt;Button type=&quot;primary&quot; size=&quot;medium&quot; onClick={ this.clearValidate.bind(this) }&gt;&#x6E05;&#x9664;&#x8868;&#x5355;&#x9A8C;&#x8BC1;&lt;/Button&gt;
        &lt;/Form.form&gt;
    )
}
</code></pre><h3 class="mume-header" id="tree">Tree&#x6811;&#x5F62;&#x5C55;&#x5F00;</h3>

<pre data-role="codeBlock" data-info class="language-"><code>import { Tree } from &apos;@/component/index&apos;

constructor(props){
    super(props)
    this.state = {
        //checked&#xFF1A;0: &#x9009;&#x4E2D;&#xFF0C;1&#xFF1A;&#x534A;&#x9009;&#x4E2D;&#xFF0C;2: &#x672A;&#x9009;&#x4E2D;
        //&#x53EA;&#x9700;&#x7ED9;&#x53F6;&#x5B50;&#x8282;&#x70B9;&#x8BBE;&#x7F6E;checked&#x5C5E;&#x6027;&#x9009;&#x4E2D;&#x72B6;&#x6001;&#xFF0C;&#x7236;&#x7EA7;&#x8282;&#x70B9;&#x6839;&#x636E;&#x5B50;&#x8282;&#x70B9;&#x72B6;&#x6001;&#x66F4;&#x65B0;&#x81EA;&#x8EAB;&#x9009;&#x62E9;&#x72B6;&#x6001;
        //&#x53F6;&#x5B50;&#x8282;&#x70B9;checked(0: &#x9009;&#x4E2D;&#xFF0C;2: &#x672A;&#x9009;&#x4E2D;)&#xFF0C;&#x7236;&#x7EA7;&#x8282;&#x70B9;&#x5728;checkboxChange&#x56DE;&#x8C03;&#x4E2D;&#x6839;&#x636E;&#x5B50;&#x8282;&#x70B9;&#x72B6;&#x6001;&#xFF0C;&#x8FD4;&#x56DE;&#x5176;&#x81EA;&#x8EAB;&#x7684;checked(0: &#x9009;&#x4E2D;&#xFF0C;1: &#x4E0D;&#x5B9A;&#x9009;&#xFF0C;2: &#x672A;&#x9009;&#x4E2D;)
        data: [  
            {
                name: &apos;&#x4E00;&#x7EA7;-1&apos;,
                children: [
                    {
                        name: &apos;&#x4E8C;&#x7EA7;-1&apos;,
                        children: [
                            {
                                name: &apos;&#x4E09;&#x7EA7;-1&apos;,
                                checked: 0
                            },
                            {
                                name: &apos;&#x4E09;&#x7EA7;-2&apos;,
                                checked: 2
                            }
                        ]
                    },
                    {
                        name: &apos;&#x4E8C;&#x7EA7;-2&apos;,
                        checked: 2
                    }
                ]
            },
            {
                name: &apos;&#x4E00;&#x7EA7;-2&apos;,
                children: [
                    {
                        name: &apos;&#x4E8C;&#x7EA7;-1&apos;,
                        checked: 0
                    },
                    {
                        name: &apos;&#x4E8C;&#x7EA7;-2&apos;,
                        checked: 2
                    }
                ]
            },
            {
                name: &apos;&#x4E00;&#x7EA7;-3&apos;,
                checked: 2
            }
        ]
    }
    this.replaceProps = {
        label: &apos;name&apos;,
        children: &apos;children&apos;,
        checkedType: &apos;checked&apos;
    }
}
getNode = node =&gt; {
    console.log(node)
}
checkboxChange = data =&gt; {
    console.log(data)
}
render(){
    return (
        &lt;div&gt;
            &lt;Tree
                data={ this.state.data }  //&#x6811;&#x5F62;&#x5C55;&#x793A;&#x6570;&#x636E;
                replaceProps={ this.replaceProps }  //&#x66FF;&#x6362;&#x5C5E;&#x6027;
                checkBox={ true }  //&#x662F;&#x5426;&#x663E;&#x793A;&#x9009;&#x62E9;&#x6846;
                nodeClick={ this.getNode }  //&#x8282;&#x70B9;&#x70B9;&#x51FB;&#x4E8B;&#x4EF6;&#xFF0C;&#x8FD4;&#x56DE;&#x5F53;&#x524D;&#x70B9;&#x51FB;&#x8282;&#x70B9;&#x9879;
                checkboxChange={ this.checkboxChange }  //&#x9009;&#x62E9;&#x6846;&#x9009;&#x62E9;&#x6539;&#x53D8;&#x4E8B;&#x4EF6;&#xFF0C;&#x8FD4;&#x56DE;&#x6574;&#x4E2A;&#x6811;&#x5F62;&#x5C55;&#x793A;&#x6570;&#x636E;&#x72B6;&#x6001;
                render={  //&#x8282;&#x70B9;&#x63D2;&#x69FD;
                    item =&gt; {
                        return(
                            &lt;div&gt;...&lt;/div&gt;
                        )
                    }
                }
            /&gt;
        &lt;/div&gt;
    )
}
</code></pre><h3 class="mume-header" id="crop">Crop&#x56FE;&#x7247;&#x88C1;&#x526A;</h3>

<pre data-role="codeBlock" data-info class="language-"><code>import { Crop } from &apos;@/component/index&apos;
import img from &apos;@/assets/images/crop.jpg&apos;

constructor(props){
    super(props)
    this.state = {
        cropResult: &apos;&apos;,
        img
    }
}
getCorpImg = blob =&gt; {
    let fileReader = new FileReader()
    fileReader.readAsDataURL(blob)
    fileReader.onload = e =&gt; {
        this.setState({
            cropResult: e.target.result
        })
    }
}
render(){
    return(
        &lt;div&gt;
            &lt;Crop
                src={ this.state.img }  //&#x53EF;&#x4F20;&#x5165;&#x521D;&#x59CB;&#x88C1;&#x526A;&#x56FE;&#x7247;
                success={ this.getCorpImg }  //&#x88C1;&#x526A;&#x6210;&#x529F;&#x7ED3;&#x679C;&#x56DE;&#x8C03;
            /&gt;
            {
                this.state.cropResult
                ?
                &lt;div&gt;
                    &lt;h3&gt;&#x88C1;&#x526A;&#x7ED3;&#x679C;&#xFF1A;&lt;/h3&gt;
                    &lt;img src={ this.state.cropResult } /&gt;
                &lt;/div&gt;
                :
                null
            }
        &lt;/div&gt;
    )
}
</code></pre><h3 class="mume-header" id="tooltip">Tooltip&#x63D0;&#x793A;</h3>

<pre data-role="codeBlock" data-info class="language-"><code>import { Tooltip } from &apos;@/component/index&apos;

render(){
    return(
        &lt;div&gt;
            &lt;Tooltip
                title=&quot;This is Tooltip&quot;  //&#x63D0;&#x793A;&#x6587;&#x5B57;
                placement=&quot;bottom-left&quot;  //&#x63D0;&#x793A;&#x51FA;&#x73B0;&#x4F4D;&#x7F6E;&#xFF0C;&#x53EF;&#x9009;&#x62E9;&#x503C;&#xFF1A;&apos;bottom-left&apos;&#xFF0C;&apos;bottom-center&apos;&#xFF0C;&apos;bottom-right&apos;&#xFF0C;&apos;top-left&apos;&#xFF0C;    &apos;top-center&apos;&#xFF0C;&apos;top-right&apos;&#xFF0C;&apos;left-top&apos;&#xFF0C;&apos;left-center&apos;&#xFF0C;&apos;left-bottom&apos;&#xFF0C;&apos;right-top&apos;&#xFF0C;&apos;right-center&apos;&#xFF0C;&apos;right-bottom&apos;
            &gt;
                &lt;span&gt;bottom-left&lt;/span&gt;
            &lt;/Tooltip&gt;
            &lt;Tooltip title=&quot;This is Tooltip&quot;&gt;
                &lt;span&gt;bottom-center&lt;/span&gt;
            &lt;/Tooltip&gt;
            &lt;Tooltip title=&quot;This is Tooltip&quot; placement=&quot;bottom-right&quot;&gt;
                &lt;span&gt;bottom-right&lt;/span&gt;
            &lt;/Tooltip&gt;
        &lt;/div&gt;
    )
}
</code></pre><h3 class="mume-header" id="carousel">Carousel&#x8DD1;&#x9A6C;&#x706F;</h3>

<pre data-role="codeBlock" data-info class="language-"><code>import { Carousel } from &apos;@/component/index&apos;

render(){
    let arr = [1, 2, 3, 4, 5]
    return (
        &lt;div&gt;
            &lt;Carousel.carousel
                duration={ 5000 }  //&#x505C;&#x987F;&#x65F6;&#x957F;
                autoplay={ true }  //&#x662F;&#x5426;&#x81EA;&#x52A8;&#x5207;&#x6362;
                currentChange={  //&#x5207;&#x6362;&#x5B8C;&#x6210;&#x7684;&#x56DE;&#x8C03;&#xFF0C;&#x8FD4;&#x56DE;&#x5F53;&#x524D;&#x4F4D;&#x7F6E;
                    current =&gt; {
                        console.log(current)
                    }
                }
            &gt;
                &lt;Carousel.item
                    render={  //&#x8BBE;&#x7F6E;&#x6E32;&#x67D3;&#x51FD;&#x6570;&#xFF0C;&#x5E94;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x8282;&#x70B9;&#x6570;&#x7EC4;
                        () =&gt; {
                            return arr.map((item, index) =&gt; {
                                return (
                                    &lt;div key={ index }&gt;
                                        &lt;span&gt;{ item }&lt;/span&gt;
                                    &lt;/div&gt;
                                )
                            })
                        }
                    }
                /&gt;
                &lt;Carousel.prevArrow
                    render={  //&#x81EA;&#x5B9A;&#x4E49;&#x4E0A;&#x4E00;&#x9875;&#x7BAD;&#x5934;&#x5C55;&#x793A;
                        () =&gt; {
                            return (
                                &lt;div&gt;
                                    &lt;span className=&quot;icon iconfont&quot;&gt;&amp;#xe630;&lt;/span&gt;
                                &lt;/div&gt;
                            )
                        }
                    }
                /&gt;
                &lt;Carousel.nextArrow
                    render={  //&#x81EA;&#x5B9A;&#x4E49;&#x4E0B;&#x4E00;&#x9875;&#x7BAD;&#x5934;&#x5C55;&#x793A;
                        () =&gt; {
                            return (
                                &lt;div&gt;
                                    &lt;span className=&quot;icon iconfont&quot;&gt;&amp;#xe630;&lt;/span&gt;
                                &lt;/div&gt;
                            )
                        }
                    }
                /&gt;
                &lt;Carousel.icon
                    render={  //&#x81EA;&#x5B9A;&#x4E49;&#x6307;&#x793A;&#x70B9;&#x5206;&#x9875;&#x5C55;&#x793A;&#xFF0C;&#x8FD4;&#x56DE;&#x5F53;&#x524D;&#x70B9;&#x51FB;&#x9879;&#x7684;&#x4F4D;&#x7F6E;&#x3002;&#x82E5;&#x4F7F;&#x7528;&#x81EA;&#x5B9A;&#x4E49;&#x6307;&#x793A;&#x70B9;&#x5206;&#x9875;&#x5C55;&#x793A;&#x7EC4;&#x4EF6;&#xFF0C;&#x5916;&#x90E8;&#x53EF;&#x6DFB;&#x52A0;.carousel-icon-active&#x6837;&#x5F0F;&#x7C7B;&#x540D;&#xFF0C;&#x81EA;&#x5B9A;&#x4E49;&#x6DFB;&#x52A0;&#x5F53;&#x524D;&#x6307;&#x793A;&#x70B9;&#x9009;&#x4E2D;&#x6837;&#x5F0F;
                        index =&gt; {
                            return &lt;span onClick={ () =&gt; { console.log(index) } }&gt;&lt;/span&gt;
                        }
                    }
                /&gt;
                {/* &lt;Carousel.prevArrow /&gt; */}  //&#x8F6E;&#x64AD;&#x7EC4;&#x4EF6;&#x5185;&#x7F6E;&#x4E00;&#x5957;&#x7BAD;&#x5934;&#x3001;&#x6307;&#x793A;&#x70B9;&#x5206;&#x9875;&#x5C55;&#x793A;&#x7EC4;&#x4EF6;&#xFF0C;&#x53EF;&#x7701;&#x7565;&#x81EA;&#x5B9A;&#x4E49;&#x7684;&#x6E32;&#x67D3;&#x51FD;&#x6570;
                {/* &lt;Carousel.nextArrow /&gt; */}
                {/* &lt;Carousel.icon /&gt; */}
            &lt;/Carousel.carousel&gt;
        &lt;/div&gt;
    )
}
</code></pre>
      </div>
      
      
    
    
    
    
    
    
    
    
  
    </body></html>